<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.3.4.1.css">
  <script src="./script/lodash.4.17.21.js"></script>
  <script src="./bullet-chat.js"></script>
  <script src="./bullet-chat-script.js"></script>
</head>
<style>
  div {
    box-sizing: border-box;
  }
  .box {
    margin: 12px auto 0;
  }
  .root-box {
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    padding: 10px 0;
    background-color: #8f8f8f;
  }
  #root {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
  }
  .row-top {
    margin-bottom: 20px;
  }
  .message-el {
    /* border: 1px solid #d9d9d9; */
    border-radius: 4px;
    line-height: 20px;
    font-size: 12px;
    text-align: left;
    padding: 0 8px;
    cursor: pointer;
    white-space:nowrap;
    position: absolute;
  }
  .message-el-left-right {
    right: 0;
  }
  .message-el-right-left {
    left: 0;
  }
  .message-el-top {
    top: 0;
  }
  .message-el-bottom {
    bottom: 0;
  }
</style>
<body>
  <div class="row box">
    <div class="col-xs-12 row-top">
      <div class="root-box">
        <div id="root"></div>
      </div> 
    </div>
    <div class="col-xs-6">
      <button type="button" class="btn btn-primary btn-sm" id="play"> 开始 </button>
      <button type="button" class="btn btn-danger btn-sm" id="pause"> 暂停 </button>
      <button type="button" class="btn btn-warning btn-sm" id="automatic"> 自动分发 </button>
      <div class="btn-group btn-group-sm" id="barrageSetting">
        <button
          type="button" 
          class="btn btn-default dropdown-toggle" 
          data-toggle="dropdown" 
          aria-haspopup="true" 
          aria-expanded="false"
        >
          弹幕设置 <span class="caret"></span>
        </button>
        <div class="dropdown-menu" style="width: 360px;">
          <div class="row" style="margin: 0;">
            <div class="col-xs-3" style="line-height: 34px;padding: 0;">
              <label for="inputEmail3" class="col-sm-2 control-label" style="margin-bottom: 0;"> 
                弹幕区域 
              </label>
            </div>
            <div class="col-xs-9" style="padding: 0;">
              <div id="displayArea" class="btn-group input-group-sm" role="group" aria-label="...">
                <button type="button" class="btn btn-default" data-index="0"> 1/4 </button>
                <button type="button" class="btn btn-default" data-index="1"> 1/2 </button>
                <button type="button" class="btn btn-default" data-index="2"> 3/4 </button>
                <button type="button" class="btn btn-default" data-index="3"> 全屏 </button>
              </div>
            </div>
          </div>
          <div class="row" style="margin: 0;margin-top: 8px;">
            <div class="col-xs-3" style="line-height: 34px;padding: 0;">
              <label for="inputEmail3" class="col-sm-2 control-label" style="margin-bottom: 0;"> 
                弹幕轨迹 
              </label>
            </div>
            <div class="col-xs-9" style="padding: 0;">
              <div id="trajectory" class="btn-group input-group-sm" role="group" aria-label="...">
                <button type="button" class="btn btn-default" data-index="0"> 右 >> 左 </button>
                <button type="button" class="btn btn-default" data-index="1"> 左 >> 右 </button>
              </div>
            </div>
          </div>
          <div class="row" style="margin: 0;margin-top: 8px;">
            <div class="col-xs-3" style="line-height: 34px;padding: 0;">
              <label for="inputEmail3" class="col-sm-2 control-label" style="margin-bottom: 0;"> 
                边 
              </label>
            </div>
            <div class="col-xs-9" style="padding: 0;">
              <div id="entryEdge" class="btn-group input-group-sm" role="group" aria-label="...">
                <button type="button" class="btn btn-default" data-index="0"> 靠顶 </button>
                <button type="button" class="btn btn-default" data-index="1"> 靠底  </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="input-group input-group-sm">
        <input id="input" type="text" class="form-control" placeholder="输入内容" aria-describedby="sizing-addon2">
        <span class="input-group-btn">
          <button class="btn btn-primary" type="button" id="add"> 发表 </button>
        </span> 
      </div>
    </div>
  </div>
</body>
</html>